/**************************************
 *
 * VLOOK™ 模板主题
 *
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * Telegram Channel: t.me/vlook_markdown
 * email: maxchow@qq.com
 *
 * For(wechat): wunyunpeng
 * 2023-5
 *
 *************************************/

@import "../font";
@import "../color";
@import "../common";

// 主题信息
@themeVer: "V28.1";
@themeName: "vlook-x-vueb";
@themeDesc: "× VueB";
@themeEmail: "wuyp@vip.qq.com";

// 指定字体主题
.applyFontStyle(local);
// 指定主题配套的圆角
.applyThemeRadius(big);
// 文档文字颜色
@vueTextLight: #213547;
@vueTextDark: #F0F2F4;
.applyDocTextColor(@vueTextLight, @vueTextDark);
// 文档背景使用图片
.applyDocBgImg(@docBgImgLight_Twill_R, @docBgImgDark_Twill_R);
// 生成指定的表格样式
.genTableStyle(flat);

:root {
    --thm-fav-logo-lg: none;
    --thm-fav-logo-dk: var(--thm-fav-logo-lg);
}

// 主题主色
@theme1: #42b883;
@theme2: #647ef0;
@theme3: #FFFFFF;
@theme1Dark: darken(@theme1, 20%);
@theme1Alt: lighten(@theme1, 50%);
@theme1AltDark: darken(@theme1, 35%);//@codeBgColorDark;
@theme2Dark: darken(@theme2, 20%);
@theme2Alt: lighten(@theme2, 25%);
@theme2AltDark: darken(@theme2, 65%);
@theme1Fade: rgba(red(@theme1), green(@theme1), blue(@theme1), @accOpacity);
// @theme2Fade: rgba(red(@theme2), green(@theme2), blue(@theme2), @accOpacity);
@theme2Fade: rgba(red(@theme2), green(@theme2), blue(@theme2), 50%);

@themeForeColor: @theme1;
@themeForeColorFade: fade(@themeForeColor, 50%);
@themeBgColor: var(--d-bc);
@themeBgColorFade: fade(@themeForeColor, 50%);
@themeBgColorDark: darken(@themeForeColor, 20%);
@themeBgColorAlt: lighten(@themeForeColor, 42%);

// 标题色
@headerColor: @theme1;
@headerColorDark: @theme1Dark;

// 渐变标题色 h1-h5
@lg: linear-gradient(135deg, @theme1 25%, @theme2);
.genLinearGradientHeader(h1, @lg);
.genLinearGradientHeader(h2, @lg);
.genLinearGradientHeader(h3, @lg);
.genLinearGradientHeader(h4, @lg);
.genLinearGradientHeader(h5, @lg);
// @lgHeaderBg: linear-gradient(135deg, @theme1 25%, @theme2);
// @lgHeaderBgClip: text;
// @lgHeaderColor: transparent;
// @lgH1Bg: linear-gradient(135deg, @theme1 25%, @theme2);
// @lgH2Bg: @lgH1Bg;
// @lgH3Bg: @lgH1Bg;
// @lgH4Bg: @lgH1Bg;
// @lgH5Bg: @lgH1Bg;
// @lgH1BgClip: text;
// @lgH2BgClip: @lgH1BgClip;
// @lgH3BgClip: @lgH1BgClip;
// @lgH4BgClip: @lgH1BgClip;
// @lgH5BgClip: @lgH1BgClip;
// @lgH1Color: transparent;
// @lgH2Color: @lgH1Color;
// @lgH3Color: @lgH1Color;
// @lgH4Color: @lgH1Color;
// @lgH5Color: @lgH1Color;

// 6 级标题前缀内容
@h6BeforeContent: "❖" @h6NumSeparator;
// @tocHeaderNumColor: @docTextColorLightFade;
// @contentHeaderNumColor: @themeBgColorFade;
@headerBackground: linear-gradient(270deg, var(--h-bg-start), var(--h-bg-end));
@continuousHeaderBG: @headerBackground;
@headerTextAlign: right;
@headerPadding: 10px;
// 不进行标题自动编号
@vHeaderAutoNum: "h1{{#none#}},h2{{#none#}},h3{{#none#}},h4{{#none#}},h5{{#none#}}";;
@h1BeforeContent: "";
@h2BeforeContent: "";
@h3BeforeContent: "";
@h4BeforeContent: "";
@h5BeforeContent: "";

@headerBorderRadius: var(--v-r-b) var(--v-r-b-xc);
// 标题的左边框
// @h1BorderLeft: 0;
// @h2BorderLeft: 0;
// @h3BorderLeft: 0;
// @h4BorderLeft: 0;
// @h5BorderLeft: 0;
// @h6BorderLeft: 0;
// 标题的上边框
// @h1BorderTop: none;
// @h2BorderTop: none;
// @h3BorderTop: none;
// @h4BorderTop: none;
// @h5BorderTop: none;
// @h6BorderTop: 0;
@h1Margin: 2em 0 0 0;
@h2Margin: 1.5em 0 0 0;
@h3Margin: 1.5em 0 0 0;
@h4Margin: 1em 0 0 0;
@h5Margin: 1em 0 0 0;

// 题注文字、背景色
@captionTextColor: var(--d-fc-a);
@captionBackground: none;

//@quoteBorderLeft: 0;

// 按钮色
@buttonForeColor: @theme3;
@buttonForeHoverColor: @theme3;
@buttonBgColor: @theme1;
// 文库按钮颜色
@docLibButtonForeColor: @buttonForeColor;
@docLibButtonForeHoverColor: @buttonForeHoverColor;
@docLibButtonBgColor: @buttonBgColor;
// 指定 kbd 按钮风格
.applyKbdRadius(big);

// 链接颜色
@aBorderWidth: 1px;
@aColor: @theme1;
@aColorDark: @theme1;
// @alinecolor: @theme2;
@aHoverColor: @theme2;
@aHoverColorDark: @theme2Dark;
@aActiveColor: desaturate(@aHoverColor, 25%);

// 封面、封底文字位置及对齐方式
@coverTextAlign: center;
@coverTextPadding: 120px 60px 0;
@coverTextPaddingForMobile: 120px 20px 0;
@coverTextColor: @themeForeColor;
@coverSubColor: @theme2;
@coverUnderlineColor: #606070;
@coverAuthorColor: @coverUnderlineColor;
@coverOwnerColor: @coverAuthorColor;

@backcoverTextAlign: center;
@backcoverTextPadding: 220px 60px 0;
@backcoverTextPaddingForMobile: 220px 20px 0;
@backcoverTextColor: @themeForeColor;

// 对比度边框色，用于主题色与背景色对比度比较低时的边缘视觉识别
@contrastBorder: 0 0 0 0 transparent;
@contrastBorderForCover: 0 0 0 2px fade(@themeForeColor, 20%) inset;

// 封面背景设置
@coverBackgroundColor: @themeBgColor;
@coverBackgroundImage: none;
@coverBgSize: unset;
@coverBgSizeForMobile: @coverBgSize;
@coverBackgroundSize: var(--thm-c-bg-size);
@coverBackgroundRepeat: unset;
@coverBgPosition: unset;
@coverBgPositionForMobile: @coverBgPosition;
@coverBackgroundPosition: var(--thm-c-bg-pos);

// 封底背景设置
@backcoverBackgroundColor: @coverBackgroundColor;
@backcoverBackgroundImage: @coverBackgroundImage;
@backcoverBgSize: unset;
@backcoverBgSizeForMobile: @backcoverBgSize;
@backcoverBackgroundSize: var(--thm-bc-bg-size);
@backcoverBackgroundRepeat: @coverBackgroundRepeat;
@backcoverBgPosition: unset;
@backcoverBgPositionForMobile: @backcoverBgPosition;
@backcoverBackgroundPosition: var(--thm-bc-bg-pos);

@import "../base";

// 封面装饰文本样式 before
@{coverAfterYAML}::before,
@{coverWithoutYAML}::before,
@{coverAfterYAML}::after,
@{coverWithoutYAML}::after {
    content: "⟨" !important;
    position: absolute;
    left: 6%;
    top: 200px;
    color: @coverTextColor;
    font-size: 5em;
    font-weight: lighter;
    opacity: .5;
}

// 封面装饰文本样式 after
@{coverAfterYAML}::after,
@{coverWithoutYAML}::after {
    content: "⟩" !important;
    text-align: right;
    left: auto;
    top: 200px;
    right: 6%;
    color: @coverTextColor;
    font-size: 5em;
}

// 生成指定风格的多级标签样式
.genBadgeStyle(cap, dyn);

// 生成 GSA 样式
.genGSA_simple();
